<template>
    <page-wrapper>
        <table-search @search="search(1)" :isSearch="false" @reset="reset()">
            <template slot="form">
                <form-item label="">
                    <a-input v-model.trim="form.menuName" placeholder="菜单名称" />
                </form-item>
            </template>
            <template slot="extra">
                <a-button
                    class="filter-item"
                    :disabled="hasPerm(['sys:menu:add'])"
                    type="primary"
                    icon="plus"
                    @click="addInfo()"
                    >新增菜单</a-button
                >
            </template>
        </table-search>
        <div class="table_scroll">
            <table-list :data="list" :columns="columns" rowKey="menuId" :scroll="{x:1200}" :loading="loading" :pagination="false">
            <template slot="icon" slot-scope="{ text }">
                <svg-icon v-if="text.icon" :icon="text.icon" />
            </template>
            <template slot="menuType" slot-scope="{ text }">
                <dict-tag :options="menuTypes" :value="text.menuType"></dict-tag>
            </template>
            <template slot="extendone" slot-scope="{ text }" v-if="text.menuType != 'F'">
                <dict-tag :options="isShowMenu" :value="text.extendone"></dict-tag>
            </template>
            <template slot="isExternal" slot-scope="{ text }">
                <dict-tag :options="extrenalList" :value="text.isExternal"></dict-tag>
            </template>
            <template slot="isUniq" slot-scope="{ text }">
                <dict-tag :options="isSuperTypes" :value="text.isUniq"></dict-tag>
            </template>
            <template slot="path" slot-scope="{ text }">
                {{ text.menuType != 'F' ? text.path : '' }}
            </template>
            <template slot="permission" slot-scope="{ text }">
                {{ text.menuType == 'F' ? text.path : '' }}
            </template>
            <template slot="status" slot-scope="{ text }">
                <a-switch
                    checked-children="正常"
                    un-checked-children="禁用"
                    :key="text.tenantId"
                    :default-checked="text.status == 1 ? true : false"
                    @change="onSwitchStatus(text)"
                />
            </template>
            <div slot="action" slot-scope="{ text }">
                <a-button type="primary" size="small" :disabled="hasPerm(['sys:menu:update'])" @click="addInfo(text)">
                    编辑
                </a-button>
                <a-button
                    type="primary"
                    size="small"
                    :disabled="hasPerm(['sys:menu:add'])"
                    @click="addMenu(text)"
                    style="margin-left:8px"
                >
                    新增
                </a-button>
                <a-button
                    type="danger"
                    size="small"
                    @click="remove(text)"
                    :disabled="hasPerm(['sys:menu:remove'])"
                    style="margin-left:8px"
                >
                    删除
                </a-button>
            </div>
        </table-list>
        </div>

        <template v-if="isShowInfo">
            <menu-info :list="list" :info="itemInfo" @cancel="isShowInfo = false" @submit="submit" />
        </template>
    </page-wrapper>
</template>

<script>
import table from '@/mixins/table';
import { columns } from './columns';
import MenuInfo from './components/info';
import { remoteList, deleteInfo, updateInfo } from '@/api/system/menu';
import { menuTypes, isSuperTypes, isShowMenu, extrenalList } from './dictionary';

export default {
    name: 'Menus',
    mixins: [table],
    components: {
        MenuInfo
    },
    data() {
        let originForm = {
            menuName: ''
        };
        return {
            loading: false,
            originForm,
            menuTypes,
            isSuperTypes,
            isShowMenu,
            extrenalList,
            form: {
                ...originForm,
                size: 1000
            },
            list: [],
            columns,
            itemInfo: null,
            isShowInfo: false
        };
    },
    created() {
        this.search(1);
    },
    methods: {
        async search(page) {
            try {
                this.loading = true;
                if (page) {
                    this.form.page = page;
                }
                this.list = [];
                let res = await remoteList(this.form);
                let { data } = res;
                this.list = data;
                this.selectionBox = [];
            } finally {
                this.loading = false;
            }
        },
        //新增菜单
        addInfo(item = {}) {
            this.isShowInfo = true;
            this.itemInfo = item;
        },
        addMenu(item) {
            this.isShowInfo = true;
            let { menuType, menuId, parentId } = item;
            let type = 'F';
            let id = parentId;
            if (menuType == 'M') {
                type = 'C';
            }
            if (menuType != 'F') {
                id = menuId;
            }
            this.itemInfo = {
                parentId: id,
                menuType: type
            };
        },
        remove(item) {
            this.$confirm({
                title: '提示',
                content: '确定要删除该菜单吗？',
                okText: '确定',
                cancelText: '取消',
                onOk: async () => {
                    try {
                        await deleteInfo({ ids: [item.menuId] });
                        this.$message.success('删除成功!');
                        this.search(1);
                    } catch (err) {}
                },
                onCancel() {}
            });
        },
        submit() {
            this.isShowInfo = false;
            this.search(1);
        },
        //是否开启
        async onSwitchStatus(item) {
            try {
                let { status } = item;
                item.status = status == 1 ? 0 : 1;
                this.loading = true;
                await updateInfo(item);
                this.$message.success('操作成功!');
            } catch (err) {
                let { status } = item;
                item.status = status ? 0 : 1;
            } finally {
                this.loading = false;
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.btn-wrap {
    margin-bottom: 20px;
}
</style>
